<template>
  <transition name="slide-sign">
    <div class="google-sign">
      <div class="google-sign-header">
        <div class="back" @click="back">
          <i class="google-sign-left-large material-icons"></i>
        </div>
        <h1 class="t-header-headline">Sign in</h1>
      </div>
    </div>
  </transition>
</template>
<script>
  export default {
    methods: {
      back() {
        this.$router.back()
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  .slide-sign-enter-active, .slide-sign-leave-active
    transition: all 0.3s
  .slide-sign-enter, .slide-sign-leave-to
    transform: translate3d(100%, 0, 0)
  .google-sign
    position: fixed
    top: 0
    bottom: 0
    z-index: 100
    width: 100%
    background: $color-white
  .google-sign-header
    background-color #232f3e
  .back
    position absolute
    top: 0
    left: 6px
    z-index: 50
    .google-sign-left-large:before
      content: '\e314'
    .google-sign-left-large
      display: block
      padding: 10px
      font-size: $font-size-large-x
      color: $color-theme
  .t-header-headline
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1em;
    overflow: hidden;
    padding: 12px 0;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    -webkit-font-smoothing: antialiased;
</style>
